<template>
    <div class="default-main">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.miniprogram.config.Miniprogram')" name="miniprogram">
                        <el-form @keyup.enter="onSubmitMiniprogram()" :model="state.miniprogram" label-position="top" :label-width="200">
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.Name')"
                                type="string"
                                v-model="state.miniprogram.name"
                                prop="name"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.Name') })"
                            />
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.OriginalId')"
                                type="string"
                                v-model="state.miniprogram.original_id"
                                prop="original_id"
                                :attr="{
                                    blockHelp: '小程序账号登录微信公众平台，设置>账号信息，原始ID',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.OriginalId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.QrCode')"
                                type="image"
                                v-model="state.miniprogram.qr_code"
                                prop="qr_code"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.QrCode') })"
                            />
                            <el-button v-blur :loading="state.miniprogram.loading" @click="onSubmitMiniprogram()" type="primary">
                                {{ t('Save') }}
                            </el-button>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.miniprogram.config.MessagePush')" name="messagePush">
                        <el-form @keyup.enter="onSubmitMessagePush()" :model="state.messagePush" label-position="top" :label-width="200">
                            <el-form-item :label="t('xmwechat.miniprogram.config.ServerUrl')">
                                <el-input type="string" v-model="state.messagePush.server_url" prop="server_url" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.messagePush.server_url)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                                <view class="note">必须以http://或https://开头，分别支持80端口和443端口 </view>
                            </el-form-item>
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.ServerToken')"
                                type="string"
                                v-model="state.messagePush.server_token"
                                prop="server_token"
                                :attr="{
                                    blockHelp: 'Token必须为英文或数字，长度为3-32字符。',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.ServerToken') })"
                            />
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.EncodingAESKey')"
                                type="string"
                                v-model="state.messagePush.encoding_aes_key"
                                prop="encoding_aes_key"
                                :attr="{
                                    blockHelp: '消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.EncodingAESKey') })"
                            />
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.MessageEncryptionMethod')"
                                type="radio"
                                v-model="state.messagePush.message_encryption_method"
                                prop="message_encryption_method"
                                :data="{
                                    content: {
                                        plaintext: t('xmwechat.miniprogram.config.Plaintext'),
                                        // compatible: t('xmwechat.miniprogram.config.Compatible'),
                                        // security: t('xmwechat.miniprogram.config.Security'),
                                    },
                                    childrenAttr: { border: true },
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.MessageEncryptionMethod') })"
                            />
                            <el-button v-blur :loading="state.messagePush.loading" @click="onSubmitMessagePush()" type="primary">
                                {{ t('Save') }}
                            </el-button>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>

            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.miniprogram.config.DeveloperInfo')" name="developerInfo">
                        <el-form @keyup.enter="onSubmitDeveloperInfo()" :model="state.developerInfo" label-position="top" :label-width="200">
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.AppId')"
                                type="string"
                                v-model="state.developerInfo.app_id"
                                prop="app_id"
                                :attr="{
                                    blockHelp: '小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，获取AppID',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.AppId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.miniprogram.config.AppSecret')"
                                type="string"
                                v-model="state.developerInfo.secret"
                                prop="secret"
                                :attr="{
                                    blockHelp: '小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，获取AppSecret',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.miniprogram.config.AppSecret') })"
                            />
                            <el-button v-blur :loading="state.developerInfo.loading" @click="onSubmitDeveloperInfo()" type="primary">
                                {{ t('Save') }}
                            </el-button>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>

            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.miniprogram.config.ServerDomain')" name="serverDomain">
                        <el-form :model="state.serverDomain" label-position="top" :label-width="200">
                            <el-form-item :label="t('xmwechat.miniprogram.config.RequestDomain')">
                                <el-input type="string" v-model="state.serverDomain.request_domain" prop="request_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.request_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="t('xmwechat.miniprogram.config.SocketDomain')">
                                <el-input type="string" v-model="state.serverDomain.socket_domain" prop="socket_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.socket_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="t('xmwechat.miniprogram.config.UploadFileDomain')">
                                <el-input type="string" v-model="state.serverDomain.upload_file_domain" prop="upload_file_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.upload_file_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="t('xmwechat.miniprogram.config.DownloadFileDomain')">
                                <el-input type="string" v-model="state.serverDomain.download_file_domain" prop="download_file_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.download_file_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="t('xmwechat.miniprogram.config.UdpDomain')">
                                <el-input type="string" v-model="state.serverDomain.udp_domain" prop="udp_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.udp_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="t('xmwechat.miniprogram.config.TcpDomain')">
                                <el-input type="string" v-model="state.serverDomain.tcp_domain" prop="tcp_domain" readonly>
                                    <template #append>
                                        <el-button @click="clickCopy(state.serverDomain.tcp_domain)">
                                            {{ t('xmwechat.miniprogram.config.Copy') }}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { getConfig, saveConfig } from '/@/api/backend/xmwechat/miniprogram/config'
import FormItem from '/@/components/formItem/index.vue'
import { useI18n } from 'vue-i18n'
import { ElNotification } from 'element-plus'
import { ElMessage } from 'element-plus'

const { t } = useI18n()
const state = reactive({
    collapseActiveName: ['miniprogram', 'developerInfo', 'messagePush', 'serverDomain'],
    miniprogram: {
        loading: false,
        name: '',
        original_id: '',
        qr_code: '',
    },
    developerInfo: {
        loading: false,
        app_id: '',
        secret: '',
    },
    messagePush: {
        loading: false,
        server_url: '',
        server_token: '',
        encoding_aes_key: '',
        message_encryption_method: '',
    },
    serverDomain: {
        loading: false,
        request_domain: '',
        socket_domain: '',
        upload_file_domain: '',
        download_file_domain: '',
        udp_domain: '',
        tcp_domain: '',
    },
})

const onSubmitMiniprogram = () => {
    state.miniprogram.loading = true
    saveConfig('miniprogram', state.miniprogram).finally(() => {
        state.miniprogram.loading = false
    })
}
const onSubmitDeveloperInfo = () => {
    state.developerInfo.loading = true
    saveConfig('developerInfo', state.developerInfo).finally(() => {
        state.developerInfo.loading = false
    })
}
const onSubmitMessagePush = () => {
    state.messagePush.loading = true
    saveConfig('messagePush', state.messagePush).finally(() => {
        state.messagePush.loading = false
    })
}

const init = () => {
    getConfig()
        .then((res) => {
            let result = res.data.miniprogram
            state.miniprogram.name = result.name
            state.miniprogram.original_id = result.original_id
            state.miniprogram.qr_code = result.qr_code
            state.developerInfo.app_id = result.app_id
            state.developerInfo.secret = result.secret
            state.messagePush.server_url = result.server_url
            state.messagePush.server_token = result.server_token
            state.messagePush.encoding_aes_key = result.encoding_aes_key
            state.messagePush.message_encryption_method = result.message_encryption_method
            state.serverDomain.request_domain = result.request_domain
            state.serverDomain.socket_domain = result.socket_domain
            state.serverDomain.upload_file_domain = result.upload_file_domain
            state.serverDomain.download_file_domain = result.download_file_domain
            state.serverDomain.udp_domain = result.udp_domain
            state.serverDomain.tcp_domain = result.tcp_domain
        })
        .catch((e) => {
            ElNotification({
                type: 'error',
                message: e,
            })
        })
}
const clickCopy = (content: string) => {
    //创建input标签
    let input = document.createElement('input')
    //将input的值设置为需要复制的内容
    input.value = content
    //添加input标签
    document.body.appendChild(input)
    //选中input标签
    input.select()
    //执行复制
    document.execCommand('copy')
    if (document.execCommand('copy')) {
        ElMessage({
            type: 'success',
            message: '复制成功!',
        })
    }
    //移除input标签
    document.body.removeChild(input)
}
init()
</script>

<style scoped lang="scss">
.collapse {
    //width: 50%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--el-border-radius-base);
    background-color: var(--ba-bg-color-overlay);
}

.collapse-item :deep(.el-collapse-item__content) {
    padding-bottom: 15px;
}

@media screen and (max-width: 1024px) {
    .collapse {
        width: 100% !important;
    }
}

.note {
    color: #a8abb2;
    font-size: 12px;
}
</style>
